﻿@model Masuit.MyBlogs.Core.Models.Entity.Post

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章《@Model.Title》洞察分析</title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link href="/Assets/layui/css/layui.min.css" media="all" rel="stylesheet">
    <style>
        .mp-results.mp-bottomleft {
            top: unset !important;
            bottom: 0;
        }
    </style>
</head>
<body style="overflow-x: hidden">
    <h3 align="center">文章《@Model.Title》洞察分析</h3>
    <div class="searchTable">
        <div class="layui-inline">
            <input class="layui-input" name="kw" id="kw">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table class="layui-hide" id="table" lay-filter="tableEvent"></table>
    <div id="chart" style="height: 500px"></div>
    <mini-profiler max-traces="5" />
</body>
</html>

<script src="/Assets/layui/layui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js" type="text/javascript"></script>
<script>
    layui.use('table', function() {
        var table = layui.table;
        table.render({
            elem: '#table',
            url: '/@Model.Id/records',
            cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [
                [
                    { field: 'IP', title: 'IP', align: 'center', event: 'tool-ip', width:320 },
                    { field: 'Location', title: '位置和网络', align: 'center'},
                    { field: 'Referer', title: '页面来源', align: 'center', event: 'visit' },
                    { field: 'Time', title: '访问时间', align: 'center',width:180 }
                ]
            ],
            page: true,
            limit:20,
            request: {
                limitName: 'size' //每页数据量的参数名，默认：limit
            },
            parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.TotalCount > 0 ? 0 : 1, //解析接口状态
                    "msg": "暂无数据", //解析提示文本
                    "count": res.TotalCount, //解析数据长度
                    "data": res.Data //解析数据列表
                };
            }
        });
        table.on('tool(tableEvent)', function(obj){
            var data = obj.data;
            if(obj.event === 'tool-ip'){
                window.open("/tools/ip/"+data.IP);
            }
            if(obj.event === 'visit'){
                window.open(data.Referer);
            }
        });

        var $ = layui.$;
        $('.searchTable .layui-btn').on('click', function () {
            table.reload('table', {
                page: {
                    curr: 1
                },
                where: {
                    kw: $('#kw').val()
                }
            });
        });
    });
    window.fetch("/@Model.Id/records-chart", {
        credentials: 'include',
        method: 'GET',
        mode: 'cors'
    }).then(function(response) {
        return response.json();
    }).then(function(res) {
        var data = [];
        for (let item of res) {
            data.push([Date.parse(item.Date), item.Count]);
        }
        var chartDom = document.getElementById('chart');
        var myChart = echarts.init(chartDom);
        var option = {
            tooltip: {
                trigger: 'axis',
                position: function(pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '最近90天访问趋势，日均：' + (res.reduce((acr, cur) => acr + cur.Count, 0) / (new Date() - new Date(res[0].Date)) * (1000 * 60 * 60 * 24)).toFixed(2)
            },
            xAxis: {
                type: 'time',
                axisLabel: {
                    formatter:function (value){
                        var dt=new Date(value);
                        return dt.toLocaleDateString();
                    }
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '访问量',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    areaStyle: {},
                    data: data,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }
            ]
        };
        myChart.setOption(option);
    });
</script>
